<template>
	
	<view class="content">
		
		<view class="header">
			<view class="search-btn">
				<u-search :showAction="true" actionText="搜索" :animation="false"></u-search>
			</view>

		</view>
		

		<!-- 轮播图 -->
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in list1" :key="index">
				<image :src="item" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>
		
		<!-- 农场气象信息 -->
		<view class="weather-info">
			<view class="weather-main">
				<view class="weather-temp">{{weatherInfo.temperature}}°</view>
				<view class="weather-desc">
					<view>农场气象</view>
					
				</view>
				<view class="weather-date">{{weatherInfo.date}}</view>
				
			</view>
			<view class="weather-icon">
				<image src="http://121.36.197.175:19000/test/weather-icon.png" mode="aspectFit"></image>
			</view>
			<view class="weather-details">
				<view class="weather-detail-item">
					<text>光照指数：</text>
					<text>{{weatherInfo.light}}</text>
				</view>
				<view class="weather-detail-item">
					<text>pm25值：</text>
					<text>{{weatherInfo.pm25}}</text>
				</view>
				<view class="weather-detail-item level-item">
					<u-icon :name="getAirQualityIcon(weatherInfo.level)" :color="weatherInfo.levelColor" size="16"></u-icon>
					<view class="weather-level" :style="{backgroundColor: weatherInfo.levelColor}">{{weatherInfo.level}}</view>
				</view>
				<view class="weather-detail-item">
					<text>风速：</text>
					<text>{{weatherInfo.windSpeed}}</text>
				</view>
				<view class="weather-detail-item">
					<text>湿度：</text>
					<text>{{weatherInfo.humidity}}%</text>
				</view>
			</view>
		</view>

		<!-- 农场特色标签 -->
		<view class="farm-tags">
			<view class="tag-item" @click="refreshCaptcha">

						<u-icon name="map" color="#ffaa00" size="20"></u-icon>
				<!-- <text>产地直供</text> -->
				<button class="farm-map" @click="toMap" style="border: none; font-size: 12px;">产地直供</button>
			</view>
			<view class="tag-item">
				<u-icon name="twitter" color="#ffaa00" size="20"></u-icon>
				<text>安全健康</text>
			</view>
			<view class="tag-item">
				<u-icon name="qq-fill" color="#ffaa00" size="20"></u-icon>
				<text>正宗特色</text>
			</view>
			<view class="tag-item">
				<u-icon name="pushpin" color="#ffaa00" size="20"></u-icon>
				<text>质高价优</text>
			</view>
		</view>

		<!-- 热点消息 -->
		<view class="hotspot">
      <u-notice-bar :text="text1"></u-notice-bar>
		</view>

		<!-- 功能菜单 -->
		<view class="function-grid">
			<view class="function-row">
				<view class="function-item" @click="navigateToShop()">
					<image src="http://121.36.197.175:19000/test/icon-farm-select.png" mode="aspectFit" @click.stop="navigateToShop()"></image>
					<text>农场优选</text>
				</view>
				<view class="function-item" @click="navigateToMonitor()">
					<image src="http://121.36.197.175:19000/test/icon-farm-monitor.png" mode="aspectFit" @click="navigateToMonitor()"></image>
					<text>农场监控</text>
				</view>
				<view class="function-item" @click="navigateToRent()">
					<image src="http://121.36.197.175:19000/test/icon-farm-rent.png" mode="aspectFit" @click.stop="navigateToRent()"></image>
					<text>农场租地</text>
				</view>
				<view class="function-item" @click="navigateToAdopt()">
					<image src="http://121.36.197.175:19000/test/icon-farm-adopt.png" mode="aspectFit" @click.stop="navigateToAdopt()"></image>
					<text>农场认养</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/farm/signin')">
					<image src="http://121.36.197.175:19000/test/icon-farm-signin.png" mode="aspectFit" @click="navigateTo('/pages/signin/signin')"></image>
					<text @click="navigateTo('/pages/signin/signin')">签到</text>
				</view>
			</view>
			<view class="function-row">
				<view class="function-item" @click="navigateTo('/pages/activity/activity')">
					<image src="http://121.36.197.175:19000/test/icon-farm-activity.png" mode="aspectFit" @click.stop="navigateTo('/pages/activity/activity')"></image>
					<text>活动中心</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/farm/price')">
					<image src="http://121.36.197.175:19000/test/icon-farm-price.png" mode="aspectFit"></image>
					<text>砍砍价</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/farm/knowledge')">
					<image src="http://121.36.197.175:19000/test/icon-farm-knowledge.png" mode="aspectFit"></image>
					<text>种植知识</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/farm/money')">
					<image src="http://121.36.197.175:19000/test/icon-farm-money.png" mode="aspectFit"></image>
					<text>地块秒杀</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/shop/IntegralMall')">
					<image src="http://121.36.197.175:19000/test/icon-farm-points.png" mode="aspectFit"></image>
					<text>积分兑换</text>
				</view>
			</view>
		</view>

		<!-- 租地种地区域 -->
		<view class="rent-section">
			<view class="rent-header">
				<view class="rent-title">
					<u-icon name="list" size="20"></u-icon>
					<text>租地种地</text>
				</view>
				<view class="rent-more" @click="navigateTo('/pages/shop/more')">
					<text>查看更多</text>
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<view class="rent-banner">
				<image src="http://121.36.197.175:19000/test/rent-banner.jpg" mode="aspectFill"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import request from '@/util/request.js';
	
	export default {
		data() {
			return {
				//轮播图
				list1: [
					"http://121.36.197.175:19000/test/swiper1.jpg",
					"http://121.36.197.175:19000/test/swiper2.jpg",
				],
				//通知文本
				text1: '可视化在线认养农场，小程序开发。次平台为演示平台，有想做同款小程序的欢迎联系',

				//天气信息
				weatherInfo: {
					temperature: '13.05',
					date: new Date().toISOString().split('T')[0].replace(/-0+/g, '-'), 
					level: '良',
					levelColor: '#8BC34A',
					light: '0',
					pm25: '36',
					windSpeed: '2.89',
					humidity: '99'
				}
			};
		},
		onLoad() {
			// 页面加载时获取天气信息
			this.getWeatherInfo();
		},
		methods: {
			// 获取天气信息
			async getWeatherInfo() {
				try {
					console.log('开始请求天气接口...');
					const res = await request({
						url: '/user-service/weather/info',
						method: 'GET'
					});
					
					console.log('天气接口返回数据:', res);
					
					if (res.success && res.data && res.data.weather) {
						// 解析weather字符串为JSON对象
						const weatherData = JSON.parse(res.data.weather);
						console.log('解析后的天气数据:', weatherData);
						
						// 更新天气信息
						this.weatherInfo = {
							...this.weatherInfo,
							temperature: weatherData.tem || '0', // 当前温度
							windSpeed: weatherData.win_meter || '0km/h', // 风速（保留原始值包括km/h）
							humidity: this.extractHumidity(weatherData.humidity), // 湿度
							date: weatherData.date || this.weatherInfo.date, // 日期
							pm25: weatherData.air_pm25 || this.weatherInfo.pm25, // PM2.5
							level: weatherData.air_level || this.weatherInfo.level, // 空气质量等级
							levelColor: this.getLevelColor(weatherData.air_level), // 空气质量等级颜色
							light: weatherData.uvIndex || this.weatherInfo.light // 光照指数（使用紫外线指数）
						};
						
						console.log('天气信息更新完成:', this.weatherInfo);
						// 强制触发页面更新
						this.$forceUpdate();
						
						// uni.showToast({
						// 	title: '天气信息更新成功',
						// 	icon: 'success'
						// });
					} else {
						console.error('天气接口返回数据格式不正确:', res);
						uni.showToast({
							title: '天气数据格式错误',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取天气信息失败:', error);
					uni.showToast({
						title: '获取天气信息失败',
						icon: 'none'
					});
				}
			},
			

			
			// 提取湿度数字部分
			extractHumidity(humidity) {
				if (!humidity) return '0';
				// 从 "74%" 中提取 "74"
				return humidity.replace('%', '');
			},
			
			// 根据空气质量等级获取颜色
			getLevelColor(level) {
				switch (level) {
					case '优':
						return '#4CAF50'; // 绿色
					case '良':
						return '#8BC34A'; // 浅绿色
					case '轻度污染':
						return '#FF9800'; // 橙色
					case '中度污染':
						return '#FF5722'; // 深橙色
					case '重度污染':
						return '#F44336'; // 红色
					case '严重污染':
						return '#9C27B0'; // 紫色
					default:
						return '#8BC34A'; // 默认浅绿色
				}
			},
			
			change(e) {
				console.log('轮播图切换', e);
			},
			click(e) {
				console.log('轮播图点击', e);
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			toMap(){
				uni.navigateTo({
				  url: `/pages/map/test`
				});
			},
			navigateToShop() {
			  uni.switchTab({
			    url: '/pages/shop/shop'
			  });
			},
			navigateToAdopt() {
			  uni.switchTab({
			    url: '/pages/farm/adopt'
			  });
			},
			navigateToRent() { 
				uni.switchTab({
			    url: '/pages/farm/rent'
			  });
			},
			navigateToMonitor(){ 
				uni.navigateTo({
			    url: '/pages/monitor/monitor'
			  });
			},
			getAirQualityIcon(level) {
				switch (level) {
					case '优':
						return 'checkmark-circle'; // 优 - 绿色勾号
					case '良':
						return 'checkmark'; // 良 - 勾号
					case '轻度污染':
						return 'alert-circle'; // 轻度污染 - 警告圆圈
					case '中度污染':
						return 'alert'; // 中度污染 - 警告
					case '重度污染':
						return 'close-circle'; // 重度污染 - 关闭圆圈
					case '严重污染':
						return 'close'; // 严重污染 - 叉号
					default:
						return 'checkmark'; // 默认
				}
			}
		}
	};
</script>

<style>
	.content {
		width: 100%;
		background-color: #f5f5f5;
	}

	.swiper {
		height: 450rpx;
		width: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}
	
	/* 天气信息 */
	.weather-info {
		margin: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx;
	}
	
	.weather-main {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.weather-temp {
		font-size: 60rpx;
		font-weight: bold;
		color: #FFA726;
	}
	
	.weather-desc {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.weather-date {
		font-size: 30rpx;
		color: #FFA726;
		margin-right: 15rpx;
	}
	
	.weather-details {
		display: flex;
		flex-wrap: nowrap;
		font-size: 24rpx;
		color: #666;
		align-items: center;
	}
	
	.weather-detail-item {
		flex: 1;
		text-align: center;
		margin-top: 10rpx;
		white-space: nowrap;
	}
	
	.level-item {
		flex: 0.5;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4rpx;
	}
	
	.weather-level {
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-weight: 400;
		text-align: center;
		display: inline-block;
		min-width: 30rpx;
		line-height: 28rpx;
		margin-top: 2rpx;
	}
	
	.weather-icon {
		position: absolute;
		right: 50rpx;
		width: 80rpx;
		height: 80rpx;
	}
	
	/* 农场特色标签 */
	.farm-tags {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
	}
	
	.tag-item {
		display: flex;
		align-items: center;
	}
	
	.tag-item image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	
	.tag-item text {
		font-size: 24rpx;
		color: #666;
	}
	
	/* 热点消息 */
	.hotspot {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		margin: 0 20rpx 20rpx;
		padding: 15rpx 20rpx;
		border-radius: 12rpx;
	}
	
	.hotspot-icon {
		margin-right: 15rpx;
	}
	
	.hotspot-icon image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.hotspot text {
		font-size: 28rpx;
		color: #333;
	}
	
	/* 功能菜单 */
	.function-grid {
		background-color: #ffffff;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
		padding: 20rpx 0;
	}
	
	.function-row {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}
	
	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 120rpx;
	}
	
	.function-item image {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}
	
	.function-item text {
		font-size: 24rpx;
		color: #333;
	}
	
	/* 租地种地区域 */
	.rent-section {
		background-color: #ffffff;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
		padding: 20rpx;
	}
	
	.rent-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.rent-title {
		display: flex;
		align-items: center;
	}
	
	.rent-title image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.rent-title text {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	
	.rent-more {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #999;
	}
	
	.rent-more image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 5rpx;
	}
	
	.rent-banner {
		width: 100%;
		height: 300rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.rent-banner image {
		width: 100%;
		height: 100%;
	}
</style>
